<template>
  <div class="phone-modal" v-show="showMask">
    <div class="phone-box">
      <div class="phone_title1">手机号绑定</div>
      <div class="phone_con">
        <div class="phone_title2">
          <span class="title1">手机号:</span>
          <div class="content">
            <input type="text" maxlength="11" class="phone" v-model="phone" placeholder="请输入手机号" @blur="inputBlur"/>
          </div>
        </div>
        <div class="phone_title3">
          <span class="title2">验证码:</span>
          <div class="content">
            <input type="text" maxlength="6" class="code" placeholder="请输入验证码" v-model="codeNum" @blur="inputBlur"/>
          </div>
          <v-code ref="timerBtn" class="code_txt" v-on:run="sendCode"></v-code>
        </div>
      </div>
      <div class="phone_btn" @click="commitInfo">确定</div>
    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../common/js/env"
  import code from "../components/code/code"

  export default {
    props: {
      value: {},
    },
    data() {
      return {
        phone: "",
        codeNum: "",
        token: "",
        showMask: false,
      }
    },
    mounted() {
      this.showMask = this.value;
    },
    methods: {
      checkPhone() {//校验手机号码
        let phone = this.phone;
        var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (phone == "") {
          this.$vux.toast.text("手机号码不能为空", "middle");
          return;
        }
        if (!reg.test(phone)) {
          this.$vux.toast.text("手机号码格式错误", "middle");
          return;
        }
        return true;
      },
      checkCode() {//校验验证码
        let reg = /^[0-9]*$/;
        let code = this.codeNum;
        if (code == "") {
          this.$vux.toast.text("验证码不能为空", "middle");
          return;
        } else if (!reg.test(code)) {
          this.$vux.toast.text("验证码格式不正确", "middle");
          return;
        }
        return true;
      },
      sendCode() {//获取验证码
        let phone = this.phone;
        if (this.checkPhone()) {
          //获取token1
          this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
          this.axios.get(baseUrl + "/login/get_token?phone=" + phone + "&i=6").then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0) {
              this.token1 = resultObj.data;
              this.axios.get(baseUrl + "/login/send_code?phone=" + phone + "&i=6" + "&userToken=" + this.token1).then((res) => {
                let resultObj = res.data;
                if (resultObj.code == 0) {
                  this.token2 = resultObj.data;
                  this.$refs.timerBtn.start(); //启动倒计时
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  this.$refs.timerBtn.stop();
                }
              }).catch(function (error) {
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(function (error) {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      commitInfo() {//确定
        if (this.checkPhone() && this.checkCode()) {
          //校验验证码
          this.axios.get(baseUrl + "/login/mate_code?phone=" + this.phone + "&i=6&code=" + this.codeNum + "&token=" + this.token2).then((res) => {
            let mateObj = res.data;
            if (mateObj.code == 0) {
              //回调处理微信绑定客户手机号
              this.showMask = false;
              this.$emit('bindPhone', this.phone);
            } else {
              this.$vux.toast.text(mateObj.msg, "middle");
            }
          }).catch(function (error) {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      }
    },
    watch: {
      value(newVal, oldVal) {
        this.showMask = newVal;
      },
      showMask(val) {
        this.$emit('input', val);
      }
    },
    components: {
      "v-code": code
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../common/stylus/mixin.styl";

  .phone-modal
    modal(absolute, 100, 0.5)
    .phone-box
      position: absolute
      left: 0
      top: 0
      right: 0
      bottom: 0
      margin: auto
      wh(8rem, 5.76rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.16rem)
      box-sizing: border-box
      .phone_title1
        text-align: center
        margin-top: 0.64rem
        margin-bottom: 0.627rem
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: bold
      .phone_con
        margin: 0 auto;
        wh(7.2rem, 2.133rem)
        margin-bottom: 0.4rem
        .phone_title2
          fj(space-between, center)
          wh(100%, 0.96rem)
          margin-bottom: 0.213rem
          .title1
            padding-right: 0.1rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
            font-weight: 500
          .content
            display: flex
            align-items: center
            flex: 1
            height: 0.96rem
            border: 0.027rem solid rgba(224, 224, 224, 1)
            border-radius(0.16rem)
            .phone
              padding-left: 0.1rem
              height: 0.6rem
              line-height: 0.6rem
              color: #666666
              font-size: 0.44rem
        .phone_title3
          fj(space-between, center)
          wh(100%, 0.96rem)
          .title2
            padding-right: 0.1rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
            font-weight: 500
          .content
            display: flex
            align-items: center
            flex: 1
            height: 0.96rem
            border: 0.027rem solid rgba(224, 224, 224, 1)
            border-radius(0.16rem)
            .code
              width: 58%
              padding-left: 0.1rem
              height: 0.6rem
              line-height: 0.6rem
              color: #666666
              font-size: 0.44rem
          .code_txt
            position: absolute
            right: 7.3%
            z-index: 2
            padding-left: 0.1rem
            padding-right: 0.1rem
            height: 0.9rem
            line-height: 0.9rem
            size-color(0.373rem, $color)
            font-weight: 500
            border: none
            background: #FFF
            border-radius(0.05rem)
      .phone_btn
        fj(center, center)
        margin: 0 auto
        wh(7.2rem, 1.067rem)
        border-radius: (0.16rem)
        background: rgba(60, 175, 255, 1)
        size-color(0.453rem, rgba(255, 255, 255, 1))
        font-weight: 500
</style>
